<template>
  <div id="noteBox">
    <div class="title">
      <span class="line"></span>
      <span>{{$t('wechat.baiduwangpan')}}</span>
      <el-button
        style="
          float: right;
          margin-left: 10px;
          margin-right: 10px;
          margin-top: 6px;
          color: #fff;
        "
        type="text"
        @click="printPdf"
        ><i class="el-icon-printer"></i> {{$t('wechat.dayinSms')}}</el-button>
    </div>
    <div class="bg">
        <!-- <span>账户信息：</span> -->
        <img width="60px" height="60px"  :src="tableData[0].avatar" alt="" @error="errorHandler">
        <span style="margin-left:25px;">{{$t('wechat.username')}}：{{tableData[0].nick}}</span>
        <span style="margin-left:25px;">{{$t('wechat.account')}}：{{tableData[0].accountname}}</span>
    </div>

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="好友列表" name="first">
        <div class="baiduNetDisc">
          <div class="netDiscItem" v-for="(item,index) in tableFirendsData" :key="index">
            <img width="60px" height="60px" :src="item.avatar" alt="" @error="errorHandler">
            <div style="width:320px;">
              <div>{{$t('wechat.username')}}：{{item.nick}}</div>
              <div>{{$t('wechat.account')}}：{{item.account}}</div>
            </div>
          </div>
        </div>
        <div class="block">
            <el-pagination
            @size-change="handleSizeChangeFirends"
            @current-change="handleCurrentChangeFirends"
            :current-page="offsetFirends"
            :page-size="limitFirends"
            layout="total, prev, pager, next, jumper"
            :total="totalFirends" hide-on-single-page
            :pager-count="5">
            </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="文件列表" name="second">
     
        <!-- <el-table height="500" :data="tableFileData" border style="width: 100%">
          <el-table-column
          width="350"
            prop="content"
            label="文件信息"
            :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div>文件名：{{scope.row.filename}}</div>
              <div>文件大小：{{scope.row.filesize}}</div>
              <div>文件md5：{{scope.row.md5}}</div>
              <div>服务器路径：{{scope.row.serverpath}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="content"
            align="center"
            label="文件类型"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.filetype==1">视频</div>
              <div v-if="scope.row.filetype==2">音频</div>
              <div v-if="scope.row.filetype==3">图片</div>
              <div v-if="scope.row.filetype==4">文档</div>
              <div v-if="scope.row.filetype==5">程序</div>
              <div v-if="scope.row.filetype==6">其他</div>
              <div v-if="scope.row.filetype==7">种子</div>
            </template>
          </el-table-column>
          <el-table-column prop="notetime" width="300" align="center" label="时间">
            <template slot-scope="scope">
              <div>客户端创建时间：{{formate(scope.row.cctime)}}</div>
              <div>客户端修改时间：{{formate(scope.row.cmtime)}}</div>
              <div>服务器创建时间：{{formate(scope.row.sctime)}}</div>
              <div>服务器修改时间：{{formate(scope.row.smtime)}}</div>
            </template>
          </el-table-column>
        </el-table> -->
        <div style="padding:0 2.5%">
            <a-input-search placeholder="输入文件名搜索" v-model="searchkey" style=";margin-bottom:10px;float:right;" @search="initFileList" />
        </div>
        <div class="baiduNetDisc1" style="width:100%;">
          <div class="netDiscItem" style="border-bottom:1px solid #ccc;" v-for="(item,index) in tableFileData" :key="index">
            <div style="width:420px;padding:15px 0;">
              <div><span style="font-weight: bold;">文件名</span>：{{item.filename}}</div>
              <div><span style="font-weight: bold;">文件大小</span>：{{item.filesize}}</div>
              <div><span style="font-weight: bold;">文件md5</span>：{{item.md5}}</div>
              <div v-if="item.filetype==1"><span style="font-weight: bold;">文件类型</span>：视频</div>
              <div v-if="item.filetype==2"><span style="font-weight: bold;">文件类型</span>：音频</div>
              <div v-if="item.filetype==3"><span style="font-weight: bold;">文件类型</span>：图片</div>
              <div v-if="item.filetype==4"><span style="font-weight: bold;">文件类型</span>：文档</div>
              <div v-if="item.filetype==5"><span style="font-weight: bold;">文件类型</span>：程序</div>
              <div v-if="item.filetype==6"><span style="font-weight: bold;">文件类型</span>：其他</div>
              <div v-if="item.filetype==7"><span style="font-weight: bold;">文件类型</span>：种子</div>
              <div><span style="font-weight: bold;">服务器路径</span>：{{item.serverpath}}</div>
              <div><span style="font-weight: bold;">客户端创建时间</span>：{{formate(item.cctime)}}</div>
              <div><span style="font-weight: bold;">客户端修改时间</span>：{{formate(item.cmtime)}}</div>
              <div><span style="font-weight: bold;">服务器创建时间</span>：{{formate(item.sctime)}}</div>
              <div><span style="font-weight: bold;">服务器修改时间</span>：{{formate(item.smtime)}}</div>
            </div>
          </div>
        </div>
        <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="offset"
            :page-size="limit"
            layout="total, prev,pager, next, jumper"
            :total="total" hide-on-single-page
            :pager-count="5">
            </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getNetdiscList,getNetdiscFileList,getNetdiscFirendsList } from "@/api/netdisc/netdiscApi";
import { parseTime } from "@/utils/index";
import print from "print-js";
import html2canvas from "html2canvas";
export default {
  name: "netdisc2",
  props: ["sendData"],
  data() {
    return {
      errorSrc:require('@/assets/imgError.png'),
      tableData: [],
      tableFileData:[],
      offset: 1,
      total:0,
      offsetFirends:1,
      limitFirends:20,
      totalFirends:0,
      limit:20,
      activeName: 'first',
      searchkey:'',
      totalFirend:'',
      tableFirendsData:''
    };
  },
  
  watch: {
    "$store.state.account.netdisc2": function () {
      this.activeName = 'first',
      this.offset = 1;
      this.init();
      this.initFirendsList();
      this.initFileList();
    },
  },
  created() {
    this.offset = 1;
    this.init();
    this.initFirendsList();
    this.initFileList();
  },
  methods: {
    //图片加载报错
    errorHandler(e){
      e.target.src = this.errorSrc
    },
    handleClick(e){
      if(e.index=='0'){
          this.initFirendsList()
      }else if(e.index=='1'){
          this.initFileList()
      }
    },
    init() {
      let data = {
        proof_num: this.sendData.proof_num,
        account_id:this.sendData.account_id,
        // limit:this.limit,
        // offset:this.offset
      };
      getNetdiscList(data).then((res) => {
        this.tableData = res.data;
        // this.total=res.data.cnt
      });
    },
    // 文件列表
    initFileList(){
        let data = {
          proof_num: this.sendData.proof_num,
          account_id:this.sendData.account_id,
          searchkey:this.searchkey,
          limit:this.limit,
          offset:this.offset
        };
        getNetdiscFileList(data).then((res) => {
          this.tableFileData = res.data;
          this.total=res.data[0].cnt;
        });
    },
    // 好友列表
    initFirendsList(){
        this.tableFirendsData=[]
        let data = {
        proof_num: this.sendData.proof_num,
        account_id:this.sendData.account_id,
        limit:this.limitFirends,
        offset:this.offsetFirends
      };
      getNetdiscFirendsList(data).then((res) => {
        //this.tableFirendsData=res.data
        res.data.forEach(element => {
            if(element.account!=='0'){
            this.tableFirendsData.push(element)
            }
        });
        this.totalFirends=res.data[0].cnt
      });
    },
    formate(date) {
      return parseTime(date);
    },
    handleSizeChange(val) {
        this.limit=val
        this.initFileList()
    },
    handleCurrentChange(val) {
        this.offset=val
        this.initFileList()
    },
    handleSizeChangeFirends(val) {
        this.limitFirends=val
        this.initFirendsList()
    },
    handleCurrentChangeFirends(val) {
        this.offsetFirends=val
        this.initFirendsList()
    },
    //打印
    printPdf() {
      html2canvas(document.getElementById("noteBox")).then(function (canvas) {
        var imgageData = canvas.toDataURL("image/png"); //把canvas转为base64图片
        print(imgageData, "image");
      });
    },
  },
};
</script>

<style scoped>
.baiduNetDisc {
  height: 631px;
  padding: 0 10px;
  overflow-y: auto;
  padding-bottom: 100px;
}

.baiduNetDisc1 {
  height: 590px;
  padding: 0 10px;
  overflow-y: auto;
  padding-bottom: 100px;
}

.baiduNetDisc::-webkit-scrollbar,
.baiduNetDisc1::-webkit-scrollbar {
  width: 10px;
}

/* <!--修改 滚动条的 下面 的 样式--> */
.baiduNetDisc::-webkit-scrollbar-track,
.baiduNetDisc1::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

/* <!--修改 滑块 --> */
.baiduNetDisc::-webkit-scrollbar-thumb,
.baiduNetDisc1::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.netDiscItem{
  min-height:80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom:1px solid #e6e6e6;
}
.bg{
    background: rgb(236, 236, 236);
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 70px;
    margin-bottom: 10px;
    font-weight: bold;
}
.block{
    margin-top: 1vh;
}
.title {
  width: 100%;
  height: 50px;
  background: #2b2f3a;
  margin-bottom: 10px;
  font-size: 0.1rem;
  line-height: 50px;
  padding-left: 20px;
  color: #fff;
}
.line {
  width: 8px;
  height: 100%;
}
@media screen and (min-width: 2360px) {
  .baiduNetDisc {
    height: 63vh;
    padding: 0 10px;
    overflow-y: auto;
    padding-bottom: 100px;
  }

  .baiduNetDisc1 {
    height: 58vh;
    padding: 0 10px;
    overflow-y: auto;
    padding-bottom: 100px;
  }



}

@media screen and (min-width: 2561px) {
  .baiduNetDisc {
    height: 48vh;
    padding: 0 10px;
    overflow-y: auto;
    padding-bottom: 100px;
  }

  .baiduNetDisc1 {
    height: 44vh;
    padding: 0 10px;
    overflow-y: auto;
    padding-bottom: 100px;
  }

}
</style>